<template>
  <div id="home">
	  <NavBar class="home-nav"><div slot="center">购物街</div></NavBar>
	  <tab-control :titles="['流行', '新款', '精选']"
	               @tabClick="tabClick"
	               ref="tabControl1" 
				   v-show="isTabFixed"
				   class="tab-control"/>
	  <scroll class="content" 
			  ref="scroll" 
			  @scroll="contentScroll" 
			  :probe-type="3"
			  :pull-up-load="true"
			  @pullingUp="loadMore">
		  <HomeSwiper :banners="banners" @swiperImageLoad="swiperImageLoad" @showIndicator="true"></HomeSwiper>
		  <RecommendView :recommends="recommends"></RecommendView>
		  <FeatureView></FeatureView>
		  <TabControl
			  :titles="['流行','新款','精选']" 
			  @tabClick="tabClick"
			  ref="tabControl2"></TabControl>
		  <good-list :goods="showGoods"></good-list>
	  </scroll>
	  <back-top @click.native="backClick" v-show="isShowBackTop"/>
  </div>
</template>

<script>
  import NavBar from "components/common/navbar/Navbar"
  
  
  import HomeSwiper from "./childComps/HomeSwiper"
  import RecommendView from "./childComps/RecommendView"
  import FeatureView from "./childComps/FeatureView"
  import TabControl from "components/content/tabControl/TabControl.vue"
  import GoodList from "components/content/goods/GoodList.vue"
  import BackTop from "components/content/backTop/BackTop.vue"
  
  import Scroll from 'components/common/scroll/Scroll.vue'
  
  import { getHomeMultidata,getHomeGoods } from "network/home.js"
  
  import { debounce } from 'common/utils.js'
  
  export default {
    name: "Home",
	components:{
		NavBar,HomeSwiper,RecommendView,FeatureView,TabControl,GoodList,Scroll,BackTop
	},
	data() {
		return {
			banners:[],
			recommends:[],
			goods:{
				'pop': {page:0, list:[]},
				'new': {page:0, list:[]},
				'sell': {page:0, list:[]},
			},
			currentType: 'pop',
			isShowBackTop:false,
			tabOffsetTop:0,
			isTabFixed: false,
			saveY: 0
		}
	},
	created() {
		this.getHomeMultidata()
		this.getHomeGoods('pop')
		this.getHomeGoods('new')
		this.getHomeGoods('sell')
		
	},
	mounted() {
		const refresh = debounce(this.$refs.scroll.refresh, 50)
		this.$bus.$on('itemImageLoad', () => {
		  refresh()
		})
	},
	destroyed() {
		console.log('destoryed')
	},
	activated() {
		this.$refs.scroll.scrollTo(0,this.saveY,0)
		this.$refs.scroll.refresh()
	},
	deactivated() {
		this.saveY = this.$refs.scroll.getScrollY()
	},
	computed:{
		showGoods(){
			return this.goods[this.currentType].list
		}
	},
	methods:{
		//事件监听相关方法
		tabClick(index){
			switch(index){
				case 0:
				this.currentType = 'pop'
				break
				case 1:
				this.currentType = 'new'
				break
				case 2:
				this.currentType = 'sell'
				break
			}
			this.$refs.tabControl1.currentIndex = index
			this.$refs.tabControl2.currentIndex = index
		},
		backClick(){
			this.$refs.scroll.scrollTo(0,0,300)
		},
		contentScroll(position){
			//1.判断BackTop是否显示
			this.isShowBackTop = (-position.y) > 1000
			
			//2.决定tabControl是否吸顶
			this.isTabFixed = (-position.y) > this.tabOffsetTop
		},
		loadMore(){
			this.getHomeGoods(this.currentType)
			this.$refs.scroll.refresh()
		},
		swiperImageLoad(){
			this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop
		},
		
		//网络请求相关方法
		getHomeMultidata(){
			getHomeMultidata().then(res => {
				this.banners = res.data.banner.list;
				this.recommends = res.data.recommend.list;
			})
		},
		getHomeGoods(type){   
			const page = this.goods[type].page + 1
			getHomeGoods(type,page).then(res=>{
				this.goods[type].list.push(...res.data.list)
				this.goods[type].page +=1;
				this.$refs.scroll.finishPullUp()
			})
		}
	}
  }
</script>

<style scoped>
	#home {
		height: 100vh;
		position: relative;
	}
	.home-nav {
		background-color: var(--color-tint);
		color: #fff;
	}
	.tab-control {
		position: relative;
		z-index: 9;
		background-color: #fff;
	}
	/* .content {
	  height: calc(100% - 93px);
	  overflow: hidden;
	} */
	.content {
	  overflow: hidden;
	  position: absolute;
	  top: 44px;
	  bottom: 49px;
	  left: 0;
	  right: 0;
	}
</style>